export {}

// 1. 封装格式化时间的函数
// 需要类型 并且得转换时间
const formatTime = (date?: Date | string): string => {
  // 传入时间了 利用传入的时间  没传用当前时间
  if (!date) date = new Date()
  // 如果传入的是自付出  得转成时间戳
  if (typeof date === 'string') date= new Date(date)
  const h = date.getHours()
  const m = date.getMinutes()
  const s = date.getSeconds()
  return `${h}:${m}:${s}`
}
let time = formatTime()
console.log(time);

// 2. 定义数据的类型

type Data = {
  count: number
  time: string
}

type List = Array<Data>

const KEY = 'ts-demo-data'

//  3. 封装获取历史记录的函数
const getData = () => {
  const str = localStorage.getItem(KEY)
  return JSON.parse(str || '[]') as List
}

// 4. 封装修改历史记录的函数

const updateData = () => {
  // 先从本地拿到数据
  const list = getData()
  const lastItem = list[list.length - 1]
  list.push({
    count: lastItem? lastItem.count +1 : 1,
    time: formatTime()
  })
  localStorage.setItem(KEY, JSON.stringify(list))
}

// 5. 封装一个渲染函数
const render = () => {
  updateData()
  const data = getData()
  const app = document.querySelector('#app') as HTMLDivElement
  app.innerHTML = data.map((item) => `次数: ${item.count},时间: ${item.time}`).join('<br/>')
}
render()